<template>
  <van-nav-bar :title="proname" left-text="返回" placeholder left-arrow fixed @click-left="$router.back()" />
  <div>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img class="swipe-img" :src="image" />
      </van-swipe-item>
    </van-swipe>
    <div v-html="desc"></div>
  </div>

  <van-action-bar class="action-bar" :placeholder="true">
    <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" :badge="cartArr.length" />
    <van-action-bar-button type="warning" text="加入购物车" @click="addCart()" />
    <van-action-bar-button type="danger" text="立即购买" @click="onClickButton()" />
  </van-action-bar>
</template>

<script setup>

import { cartAddReq } from '@/api/cart'
import { dataListReq } from '@/api/item'
import { cartArr } from '@/stores/cart'
import { getlocalStorage } from '@/utils/localStorage'
import { showFailToast, showSuccessToast } from 'vant'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
let route = useRoute()
let data = []
let proname = ref('')
let desc = ref('')
let images = ref([])
let proid = route.query.proid

let userid = getlocalStorage.userid
dataListReq(proid)
  .then((res) => {
    if (res.data.code == 200) {
      data = res.data.data
      images.value = data.imgs
      proname.value = data.proname
      desc.value = data.desc
    }
  })
// function onClickIcon() {
//   console.log('点击图标')
// }
function addCart() {
  cartAddReq(userid, proid, 1)
    .then((res) => {
      // console.log(res.data)
      if (res.data.code == 200) {
        showSuccessToast(res.data.message);
      } else {
        showFailToast(res.data.message);
      }
    })
}
function onClickButton() {
  console.log('点击按钮')
}
</script>

<style scoped>
/* .action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
} */
.swipe-img {
  width: 100%;
}
</style>
